<template>
  <div ref="percentCircle" style="height:100%;"></div>
</template>
<script>
export default {
    name:'PercentCircle',
    props:{
        data:{
            type: Object|Number
        },
        radius:{
            type: Array,
            default: ['90%', '100%']
        },
        titlecolor:{
            type:String,
            default:"#333"
        },
        fontSize:{
            type:Number,
            default:16
        }
    },
    data(){
        return {}
    },
    watch:{
        data:{
            handler(val){
                if(val){
                    this.init();
                }
            },
            deep:true
        },
       
    },
    methods:{
        init(){
            var myChart = echarts.init(this.$refs.percentCircle);
            window.addEventListener("resize", function () {
               myChart.resize();
            });
            var datas = this.formatData(),data = datas.data,title=datas.title;
            // var colors =this.option.titlecolor||'#333333'
            console.log(this.titlecolor,"this.titlecolor")
            var option = {
                title: {
                    text: title,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: this.titlecolor,
                        fontSize: this.fontSize
                    }
                },
                color: ['#282c40'],
                legend: {
                    show: true,
                    data: []
                },
                series: [{
                    name: 'percent',
                    type: 'pie',
                    clockWise: true,
                    radius: this.radius,
                    center:['50%','50%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: data
                }]
            }
            myChart.setOption(option)
        },
        formatData(){
            var data = [
                {
                    value: 0,
                    name: 'finished',
                    itemStyle: {
                        color: { // 完成的圆环的颜色
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#2380FF' // 0% 处的颜色
                            },{
                                offset: .5, color: '#2380FF' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#2380FF' // 100% 处的颜色
                            }],
                            global: false
                        }           
                    }
                }, 
                {
                    name: 'unfinished',
                    value:0,
                    itemStyle:{
                        color:'#EBEFFA'
                    }
                }
            ],title='';
            let percent = 0,total = 0,value = 0;
            if(typeof this.data == 'number'){
                value = this.data-0;
                if(Math.abs(this.data)<1 && Math.abs(this.data)>0){
                    total = 1;
                    percent = this.data==0?0:(this.data*100).toFixed(2);
                }else if(Math.abs(this.data)<100 && Math.abs(this.data)>1){
                    total = 100;
                    percent = this.data==0?0:(this.data).toFixed(2);
                }else if(Math.abs(this.data)>100){
                    total = data;
                    percent = this.data==0?0:(this.data).toFixed(2);
                }
                console.log(this.data,"percent1",percent,value)
            }else{
                value = this.data.value-0;
                total = this.data.total-0||100;
                if(typeof this.data.value != 'number'){
                    value = this.data.value.value-0;
                    total = this.data.total.value-0||100;
                }
                percent = value==0?0:(value/total * 100).toFixed(2);
                console.log(this.data,"percent2",percent)
            }
            if(this.data.hasOwnProperty('percent')){
                percent = this.data.percent;
            }
            title = percent + '%'+"\n完成率";
            data[0].value = value;
            data[1].value = value==0?100:total - value;
            return {
                data: data,
                title: title
            };
        }
        
    },
    mounted(){
        this.init()
    }
}
</script>